<template>
  <div class="container">
<!--    轮播图开始-->
    <div class="main-carousel">
      <q-carousel
        class="main-carousel-carousel"
        animated
        v-model="slide"
        :navigation="assets.轮播图 && assets.轮播图.length > 1"
        :arrows="assets.轮播图 && assets.轮播图.length > 1"
        infinite
        :autoplay="assets.轮播图 && autoplay"
        transition-prev="slide-right"
        transition-next="slide-left"
        @mouseenter="autoplay = false"
        @mouseleave="autoplay = true"
        :style="{'min-height': carouselMinHeight}"
      >
        <q-carousel-slide
          v-for="(pic, idx) in assets.轮播图 || []"
          :class="{'cursor-pointer': !!pic.url}"
          :key="idx"
          :name="idx"
          @click="carouselClicked(pic)">
          <q-img :src="pic.id | serverImage"
            class="carousel-img">
            <q-img v-if="pic.sub" class="absolute" :src="pic.sub | serverImage"
              style="left:12%;top:50%;width:540px;height:340px;transform: translateY(-50%);"
              :style="pic.style"></q-img>
          </q-img>
        </q-carousel-slide>
      </q-carousel>
    </div>
<!--轮播图结束-->
<!--    模块1开始-->
    <div class="row news-list justify-between">
      <q-carousel
        class="col q-mr-md"
        ref="imgNewsCarousel"
        animated
        v-model="slideNews"
        navigation
        arrows
        infinite
        transition-prev="slide-right"
        transition-next="slide-left"
        @mouseenter="autoplay = false"
        @mouseleave="autoplay = true"
        height="340px"
      >
        <q-carousel-slide
          v-for="(pic, idx) in data.imgNews || []"
          :class="{'cursor-pointer': !!pic.url}"
          :key="idx"
          :name="idx"
          @click="$router.push(`/news/${pic.id}`)">
          <q-img :src="pic.图片?.id | serverImage"
            class="carousel-img cursor-pointer" height="340px">
            <div class="absolute-bottom ellipsis"
              style="padding-right:120px;">{{pic.标题}}</div>
          </q-img>
        </q-carousel-slide>

        <template v-slot:navigation-icon="{ index }">
          <div v-if="index === 0" class="full-width row items-center justify-end no-wrap"
            style="padding-bottom:8px;">
            <div v-for="(ic, niidx) in (data.imgNews || []).length" :key="niidx"
              class="carousel-control-nav-btn bottom-right"
                :class="{ active: slideNews === niidx }"
              @click="$refs.imgNewsCarousel.goTo(niidx)"></div>
          </div>
        </template>
      </q-carousel>

      <list-wrapper
          v-if="data.news && data.news.length >= 0"
          class="content-lists list policy-list col bg-white q-pa-md q-mb-lg"
          :title="$t('新闻公告')"
          :subtitle="$i18n.locale !== 'en-us' ? $t('新闻公告', 'en-us') : ''"
          url="/news">
          <simple-list-item
            class="list-item"
            v-for="(item,index) in data.news" :key="index"
            :date="item.日期"
            :title="item.标题"
            :content="item.详情 || item.标题"
            :url="`/news/${item.id}`"></simple-list-item>
        </list-wrapper>
    </div>
<!--    模块1结束-->
<!--    模块2开始-->
    <div class="cases-wrapper full-width">
      <div class="content-lists cases">
          <div class="column">
            <div class="part-title">{{$t('应用案例')}}</div>
            <q-carousel
              class="col content-carousel q-pb-xl"
              ref="case_carousel"
              animated
              v-model="slideCase"
              navigation
              infinite
              transition-prev="slide-right"
              transition-next="slide-left"
              @mouseenter="autoplay = false"
              @mouseleave="autoplay = true"
              height="570px"
            >
              <q-carousel-slide
                v-for="(cs, idx) in data.cases || []"
                :class="{'cursor-pointer': !!cs.url}"
                :key="idx"
                :name="idx"
                @click="carouselClicked(cs)">
                <div class="column relative-position">
                  <q-img :src="cs.图片?.id | serverImage"
                    class="carousel-img" height="200px">
                  </q-img>
                  <div class="case-title">{{cs.名称}}</div>
                  <div class="case-description ellipsis-3-lines q-px-lg">{{cs.详情}}</div>

                  <div class="case-detail-btn full-width row items-center justify-center">
                    <q-btn flat dense class="btn text-primary" :to="`/cases/${cs.id}`">了解详情</q-btn>
                  </div>
                </div>
              </q-carousel-slide>
              <template v-slot:navigation-icon="{ active, onClick }">
                <div class="carousel-control-nav-btn" :class="{ active }"
                  @click="onClick"></div>
              </template>

              <template v-slot:control>
                <q-carousel-control
                  position="left"
                  :offset="[0, 220]"
                  class="cursor-pointer"
                >
                  <q-icon name="fas fa-chevron-circle-left" class="text-grey-4" size="xl"
                    @click="$refs.case_carousel.previous()"></q-icon>
                </q-carousel-control>
                <q-carousel-control
                  position="right"
                  :offset="[0, 220]"
                  class="cursor-pointer"
                >
                  <q-icon name="fas fa-chevron-circle-right" class="text-grey-4" size="xl"
                    @click="$refs.case_carousel.next()"></q-icon>
                </q-carousel-control>
              </template>
            </q-carousel>
          </div>
        </div>
    </div>

    <div class="tools-wrapper full-width">
      <div class="content-lists tools">
        <div class="column">
          <div class="part-title">{{$t('哪款测试工具更合适')}}</div>
          <q-carousel
            class="col content-carousel"
            ref="tool_carousel"
            animated
            v-model="slideTool"
            navigation
            infinite
            :autoplay="false"
            transition-prev="slide-right"
            transition-next="slide-left"
            @mouseenter="autoplay = false"
            @mouseleave="autoplay = true"
            height="570px"
          >
            <q-carousel-slide
              v-for="(_, idx) in Math.ceil((data.tools || []).length / 3)"
              :key="idx"
              :name="idx">
              <div class="row no-wrap relative-position bg-white q-mb-xl" style="">
                <div class="tool-item col"
                  :class="{hover:hoverToolIndex===tidx}"
                  @mouseover="hoverToolIndex=tidx"
                  @mouseleave="hoverToolIndex=''"
                  v-for="(_, tidx) in Math.min((data.tools || []).length - (idx * 3), 3)"
                  :key="tidx"
                  @click="$router.push(data.tools[idx * 3 + tidx].详情地址
                    || `/tools/${data.tools[idx * 3 + tidx].id}`)">
                  <div class="column items-center justify-center cursor-pointer"
                    v-if="data.tools[idx * 3 + tidx]">
                    <q-img :src="data.tools[idx * 3 + tidx].图片?.id | serverImage"
                      class="carousel-img" height="160px" width="160px">
                    </q-img>
                    <div class="tool-title">{{data.tools[idx * 3 + tidx].标题}}</div>
                    <div
                      class="tool-description ellipsis-3-lines"
                    >{{data.tools[idx * 3 + tidx].描述}}</div>
                  </div>
                </div>
              </div>

            </q-carousel-slide>

            <template v-slot:navigation-icon="{ active, onClick }">
              <div class="carousel-control-nav-btn" :class="{ active }"
                @click="onClick"></div>
            </template>

            <template v-slot:control>
              <q-carousel-control
                position="left"
                :offset="[0, 280]"
                class="cursor-pointer"
              >
                <q-icon name="fas fa-chevron-circle-left" class="text-grey-4" size="xl"
                  @click="$refs.tool_carousel.previous()"></q-icon>
              </q-carousel-control>
              <q-carousel-control
                position="right"
                :offset="[0, 280]"
                class="cursor-pointer"
              >
                <q-icon name="fas fa-chevron-circle-right" class="text-grey-4" size="xl"
                  @click="$refs.tool_carousel.next()"></q-icon>
              </q-carousel-control>
            </template>
          </q-carousel>
        </div>
      </div>
    </div>

    <div class="content-lists q-pt-xl">
      <div class="row">
        <list-wrapper
          v-if="data.standards && data.standards.length >= 0"
          class="list standard-list col bg-white q-pa-md q-mb-lg"
          :title="$t('标准查阅及下载')"
          :subtitle="$i18n.locale !== 'en-us' ? $t('标准查阅及下载', 'en-us') : ''"
          url="/standard">
          <simple-list-item
            class="list-item"
            v-for="(item,index) in data.standards" :key="index"
            :title="item.名称"
            :date="item.日期"
            :url="`/standard/${item.id}`"></simple-list-item>
        </list-wrapper>

        <list-wrapper
          v-if="data.solutions && data.solutions.length >= 0"
          class="list policy-list col bg-white q-pa-md q-mb-lg"
          :title="$t('技术⽅案查阅')"
          :subtitle="$i18n.locale !== 'en-us' ? $t('技术⽅案查阅', 'en-us') : ''"
          url="/solutions">
          <simple-list-item
            class="list-item"
            v-for="(item,index) in data.solutions" :key="index"
            :date="item.日期"
            :title="item.名称"
            :url="`/solutions/${item.id}`"></simple-list-item>
        </list-wrapper>
     </div>
    </div>

    <div class="q-pt-xl" v-if="flinks && flinks.length">
      <div class="column friendly-links items-center no-wrap">
        <div class="title">合作单位</div>
        <div class="links row items-center justify-between">
          <div class="link-wrapper row no-wrap items-center justify-center q-mb-lg"
            :class="{'cursor-pointer': link.url}"
            @click="carouselClicked(link)"
            v-for="(link, idx) in flinks" :key="idx">
            <img v-if="link.logo"
              contain
              :src="link.logo | serverImage"
              class="link-logo q-mr-sm"/>
            <div class="link-name ellipsis">{{link.name}}</div>
          </div>
        </div>
     </div>
    </div>
  </div>
</template>

<script>
import mixins from 'eis-admin-mixins';
import { RefreshOnLocaleChange } from '../../components/mixins/locale';
import ListWrapper from '../../components/listWrapper.vue';
import SimpleListItem from '../../components/simpleListItem';

export default {
  name: 'WebHome',
  mixins: [mixins.ObjectDataMixin, RefreshOnLocaleChange],
  data() {
    return {
      slide: 0,
      slideNews: 0,
      slideCase: 0,
      slideTool: 0,
      autoplay: true,
      assets: {},
      hoverToolIndex: '',
      flinks: [],
    };
  },
  components: {
    ListWrapper,
    SimpleListItem,
  },
  computed: {
    carouselMinHeight() {
      let minHeight = document.documentElement.clientWidth * 0.268;
      minHeight = minHeight > 520 ? 520 : minHeight;
      return `${minHeight}px`;
    },
  },
  watch: {
    // eslint-disable-next-line func-names
    '$store.state.app.locale': function () {
      this.slide = 0;
    },
  },
  beforeMount() {
    this.getAssets(this.Bus.$store.state.portal.nation);
    this.getFLinks();
  },
  methods: {
    afterRefresh() {
    },
    getAssets(n) {
      // 卡片背景图等资源信息
      this.getRequest(`/portal/assets${n ? `?n=${n}` : ''}`).then((d) => {
        this.assets = { ...this.assets, ...((d && d.data) || {}) };
      });
    },
    getFLinks() {
      // 友情链接
      this.getRequest('/portal/flinks').then((d) => {
        this.flinks = (d && d.data) || [];
      });
    },
    carouselClicked(pic) {
      if (pic.url) {
        if (/(http(s)?|ftp):\/\//.test(pic.url)) {
          window.open(pic.url, '_blank');
        } else {
          this.$router.push(pic.url);
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container{
  background-color: #fff;
}

.main-carousel-carousel {
  max-height: 540px;
  min-height: 300px;
  height: unset !important;
  // background-color: #22539c;
  // background-color: #21518f;
  // background-color: #f7f7f7;

  .carousel-pic-placeholder {
    height: 520px;
    position: absolute;
  }
}

.carousel-img {
  max-height: 520px;
  // :deep(.q-img__image) {
  //   background-size: contain !important;
  // }
}

.news-list{
  width: 1300px;
  margin: 60px auto;
}

.cases-wrapper {
  background-image: url('/images/casesbg.png');
  background-size: cover;

  .case-title {
    position: absolute;
    left: 0;
    top: 80px;
    font-size: 32px;
    color: $primary;
    margin-left: 32px;
  }

  .case-description {
    margin: 18px auto;
    font-size: 16px;
    white-space: pre-wrap;
    // text-indent: 2rem;
    line-height: 28px;
    -webkit-line-clamp: 7;
    overflow: hidden;
  }

  .case-detail-btn {
    margin: 16px auto;
    margin-bottom: 48px;

    .btn {
      padding: 10px 48px;
      border: 1px solid $primary;
    }
  }

  .content-lists {
    max-width: 1400px;
  }

  .content-carousel {
    background: transparent;
    padding: 24px 50px;
  }
}
.tools-wrapper {
  background-image: url('/images/toolsbg.png');
  background-size: cover;
  padding-bottom: 16px;

  .tool-item {
    padding: 0 48px;
    margin: 64px auto;
    min-height: 394px;

    &.hover {
      opacity: 0.9;
      .tool-title {
        color: $primary;
      }
    }

    &:not(:last-child) {
      border-right: 1px solid $grey-4;
    }

    .tool-title {
      font-size: 20px;
      text-align: center;
      font-weight: 500;
      margin: 24px auto;
    }

    .tool-description {
      font-weight: 200;
      opacity: 0.8;
      -webkit-line-clamp: 6;
    }
  }

  .content-lists {
    max-width: 1400px;
  }

  .content-carousel {
    background: transparent;
    padding: 24px 50px;
    min-height: 570px;
  }
}

.content-lists{
  max-width: 1400px;
  margin: 0 auto;

  .list{
    padding: 12px 28px 20px 28px;
    min-height: 300px;
    min-width: 588px;

    &:nth-child(2n) {
      margin-left: 24px;
    }
  }

  .part-title {
    font-size: 36px;
    position: relative;
    width: 100%;
    text-align: center;
    margin: 48px auto 0px auto;

    &:after {
      content: '';
      background: $primary;
      width: 80px;
      height: 8px;
      position: absolute;
      left:50%;
      bottom: -8px;
      transform: translateX(-50%);
    }
  }

  .content-carousel {
    margin: 48px auto;
    width: 100%;
  }

  .list-item {
    &:first-child {
      margin-top: 16px;
    }
  }
}

.carousel-control-nav-btn {
  cursor: pointer;
  width: 42px;
  height: 5px;
  opacity: 0.5;
  background-color: $grey-3;

  &.active {
    background-color: $primary;
  }

  &:not(:last-child) {
    margin-right: 12px;
  }

  &.bottom-right {
    width: 5px;
    border-radius: 2.5px;

    &.active {
      width: 12px;
    }
  }
}

.friendly-links {
  background-color: #002E73;
  min-height: 233px;
  width: 100% !important;
  padding-bottom: 32px;

  .title {
    font-family: PingFangSC-Semibold;
    font-size: 24px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    font-weight: 600;

    margin-top: 40px;
    margin-bottom: 30px;
  }

  .links {
    width: 1300px;

    .link-wrapper {
      background: rgba(255,255,255,0.85);
      width: 244px;
      height: 80px;

      .link-logo {
        // max-width: 32px;
        max-height: 32px;
      }

      .link-name {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #001637;
        font-weight: 600;
      }
    }
  }
}
</style>
